import React, { Component } from 'react';
import './DiReactPagination.css';


class DireactPagination extends Component {
	
	constructor(props) {
		super(props);
		// 设置 initial state
		this.state = {
			options:{//默认值配置
				count:2,                //当前页前后页数    (默认：2)
				pageCount:1,            //存放返回总页数
				totalData:1,            //存放返回数据总条数
				nextPage:false         //是否有下一页
			}		
		};
	}
	
  	clickFirst(){//点击第一页	
	
		if(this.props.current-1<1){
			return false;
		}
		this.props.runAjax(1);
	}
	
	clickCurrent(item){//点击某一页
		this.props.runAjax(item);
	}
	
	clickLast(){//点击最后一页
		if(Number(this.props.current)+1>this.props.pageCount){
			return false;
		}
		this.props.runAjax(this.props.pageCount);
	}
	
	clickPrev(){//点击上一页
		if(this.props.current-1<1){
			return false;
		}
		this.props.runAjax(this.props.current-1);
	}
	
	clickNext(){//点击下一页
		if(Number(this.props.current)+1>this.props.pageCount){
			return false;
		}
		this.props.runAjax(Number(this.props.current)+1);
	}
	
	clickSkip(){//点击下一页

		if(isNaN(this.refs.skipvalue.value)){
			console.log("必须是数字")
			return false;
		}
		if(this.refs.skipvalue.value<1 || this.refs.skipvalue.value>this.props.pageCount){
			console.log("超过范围")
			return false;
		}
		this.props.runAjax(this.refs.skipvalue.value);
	}
	
	render() {
		

		var di_current=this.props.current  //存放返回当前第几页 
		              
		var di_count=this.props.count>=1?this.props.count:this.state.options.count  //当前页前后页数    (默认：2)
		                         
		var di_pageCount=this.props.pageCount?this.props.pageCount:this.state.options.pageCount//存放返回总页数      
		  
		var di_showPageNum=this.props.showPageNum==1?true:false //是否显示页码 
		
		var di_showPageCount=this.props.showPageCount==1?true:false  //是否显示总页数     
		   
		var di_totalData=this.props.totalData?this.props.totalData:this.state.options.totalData   //存放返回数据总条数     
		     
		var di_showTotalData=this.props.showTotalData==1?true:false   //是否显示数据总条数 
		    
		var di_nextPage=this.props.nextPage?this.props.nextPage:this.state.options.nextPage //是否有下一页     
		          
		var di_coping=this.props.coping==1?true:false  //是否开启首页尾页 
		
		var di_showSkipPage=this.props.showSkipPage==1?true:false  //是否显示跳页功能 
		
		//页码生成
	
		var arr=[];//页码数组
		var show_num_size=Number(di_count)*2+1;//依据当前页前后页数 计算总页码个数
		
		if(di_pageCount<=show_num_size){
			for(var i=1;i<=di_pageCount;i++){
				arr.push(i);
			}
			
		}else{
			
			if(di_current<=di_count){
				for(var i=1;i<=show_num_size;i++){
					arr.push(i);
				}
			}else if(di_current>di_pageCount-di_count){
				for(var i=di_pageCount-show_num_size+1;i<=di_pageCount;i++){
					arr.push(i);
				}
			}else{
				for(var i=di_current-di_count;i<=Number(di_current)+Number(di_count);i++){
					arr.push(i);
				}
			}
			
		}

		var di_pageNum=arr
		
		return (<div className="divuepagination">
					<ul className="pagination">
						<li style={{display:di_coping?"inline":"none"}} className={di_current==1?"disabled":""}>
						  <a onClick={this.clickFirst.bind(this)}>
							<span>第一页</span>
						  </a>
						</li>
						<li onClick={this.clickPrev.bind(this)} className={di_current==1?"disabled":""}>
						  <a>
							<span>上一页</span>
						  </a>
						</li>

						{
							di_pageNum.map(function(item,index){
								return <li className={di_current==item?"active":""} key={index} onClick={this.clickCurrent.bind(this,item)} style={{display:di_showPageNum?"inline":"none"}}>
									<a>{item}</a>
								</li>
							}.bind(this))
						}
						
						<li onClick={this.clickNext.bind(this)} className={di_current==di_pageCount?"disabled":""}>
						  <a>
							<span>下一页</span>
						  </a>
						</li>
						<li style={{display:di_coping?"inline":"none"}} className={di_current==di_pageCount?"disabled":""}>
						  <a onClick={this.clickLast.bind(this)}>
							<span>最后一页</span>
						  </a>
						</li>
					</ul>	
					<div className="divuepage">
						<div className="divuepage-text" style={{display:di_showPageCount?"inline":"none"}}>共{di_pageCount}页</div>
						<div className="divuepage-text" style={{display:di_showTotalData?"inline":"none"}}>共{di_totalData}条记录</div>
						<input className="divuepage-input" type="text" ref="skipvalue" style={{display:di_showSkipPage?"inline":"none"}} />
						<button className="divuepage-btn" onClick={this.clickSkip.bind(this)} style={{display:di_showSkipPage?"inline":"none"}}>跳转</button>
					</div>
				</div>);
	}
	
	componentDidMount() {
	 	

	}

	
}

export default DireactPagination;
